<template>
    <div>
        <div class="page-wrapper">
            <span>共 {{total}} 条</span>
            <el-pagination
                layout="prev, pager, next"
                :page-size="pages.size"
                :current-page="pages.page"
                @current-change="handleCurrentChange"
                :total="total">
            </el-pagination>
            <div class="size-wrap">
                <span class="label">每页显示：</span>
                <div class="size-list">
                    <span @click="handleSizeChange(10)" :class="[pages.size == 10 ? 'isActive' : '']">10</span>
                    <span @click="handleSizeChange(50)" :class="[pages.size == 50 ? 'isActive' : '']" class="center">50</span>
                    <span @click="handleSizeChange(100)" :class="[pages.size == 100 ? 'isActive' : '']">100</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            total:{
                type: Number,
                default: 50
            },
            pageData:{
                type: Object,
                default:() => {
                    return {
                        page:1,
                        size:10
                    }
                }
            }
        },
        data() {
            return {
                pages:{
                    page:1,
                    size: 10,
                }
            }
        },
        methods: {
            handleChange(val){
                if(val != this.pages.page) {
                    this.$set(this.pages, 'page', val)
                    this.$emit('handlePageChange', this.pages)
                }
            },
            handleStep(type){
                if((type == 'reduce' && this.pages.page <= 1) || ( type == 'add' && this.pages.page >= this.maxPage)) {
                    return
                }
                let num = this.pages.page
                if (type == 'reduce') {
                    // 向前分页
                    num = num <= 1 ? 1 : num - 1
                } else {
                    // 向后分页
                    num = num >= this.maxPage ? this.maxPage : num + 1
                }
                this.$set(this.pages, 'page', num)
                this.$emit('handlePageChange', this.pages)
            },
            handleSizeChange(size){
                this.$set(this.pages, 'size', size)
                this.$emit('handlePageChange', this.pages)
            },
            handleCurrentChange(page){
                this.$set(this.pages, 'page', page)
                this.$emit('handlePageChange', this.pages)
            },
        },
        watch: {
            pageData:{
                handler(val){
                    this.pages = {...val}
                },
                deep:true, 
                immediate:true
            }
        },
        computed: {
            maxPage(){
                const maxPage = this.total / this.pages.size
                return maxPage > parseInt(maxPage) ? parseInt(maxPage) + 1 : parseInt(maxPage)
            },
            pageSteps() {
                const pageSteps = this.total / this.pages.size > 0 ? this.total / this.pages.size : 1
                return pageSteps > parseInt(pageSteps) ? parseInt(pageSteps) + 1 : parseInt(pageSteps)
            }
        }
    }
</script>

<style lang="scss" scoped>
.page-wrapper {
    width: 100%;
    padding: 10px;
    padding-left: 0;
    display: flex;
    align-items: center;
    justify-content:flex-end;
    font-size: 14px;
    height: 57px;
    .size-wrap {
        display: flex;
        align-items: center;
        margin-left:30px;
        font-size: 14px;
        color: #C0C0C0;
        .size-list {
            margin-left: 10px;
            display: flex;
            align-items: center;
            span {
                width:50px;
                font-weight:600;
                cursor: pointer;
                text-align:center;
                &:hover {
                    color:#47D847;
                }
            }
            .isActive {
                color:#47D847;
            }
            .center {
                border-left:1px solid #C0C0C0;
                border-right:1px solid #C0C0C0;
            }
        }
    }
}
</style>

<style scoped>
.page-wrapper >>> .el-pager li {
    border:1px solid #eee;
    margin:0 5px;
    border-radius: 2px
}
.page-wrapper >>> .el-pager li.active {
    border-color: #03CA03;
    color: #47D847;
}
.page-wrapper >>> .el-pager li:hover {
    border-color: #03CA03;
    color: #47D847;
}
.page-wrapper >>>  .el-pagination .btn-prev, .page-wrapper >>> .el-pagination .btn-next {
    border:1px solid #eee;
    background-color: #f4f4f5;
}
</style>
